<script setup>
import { ref } from "vue";
import ContentRenderer from "./components/ContentRenderer.vue";
import { useChat } from "./composables/useChat";

const { userInput, conversationHistory, handleSend } = useChat();
</script>

<template>
  <div class="container">
    <div class="chat">
      <div class="chat-header">AI 聊天助手</div>
      <div class="chat-messages">
        <div
          v-for="(msg, index) in conversationHistory"
          :key="index"
          :class="['message', msg.role]"
        >
          <div v-if="msg.role === 'user'" class="content">
            <ContentRenderer :content="msg.content" />
          </div>
          <template v-else>
            <div v-if="msg.reasoning" class="reasoning">
              <ContentRenderer :content="msg.reasoning" />
            </div>
            <div v-if="msg.content" class="content">
              <ContentRenderer :content="msg.content" />
            </div>
          </template>
        </div>
      </div>
      <div class="chat-input">
        <textarea v-model="userInput" placeholder="输入问题..."></textarea>
        <button @click="handleSend">发送</button>
      </div>
    </div>
  </div>
</template>
